<template>
    <p>{{loves.eat}} - {{list[2]}}</p>
</template>

<script>
import { ref, toRef, toRefs, reactive } from 'vue'

function test() {
    // obj响应式对象
    const obj = reactive({
      id: '1',
      gender: "男",
      loves: {
        eat: "apple",
        sleep: "now"
      },
      list: ["0","1","2","3"]
    })

    // 将【响对】一股脑打散为一堆【响值】（从而模板中可以直接使用id,gender,loves,list...）
    return toRefs(obj)
}

export default {
    name: 'ToRefsForDeepObj',
    setup() {
        const { loves, list } = test()

        setTimeout(() => {
            loves.value.eat = 'banana'
            list.value[2] = '222'
        }, 2000)

        return {
            loves,
            list
        }
    }
}
</script>